<template>
  <div id="container">
    <!-- 左侧划出部分 -->
        <transition>
      <div class="leftCotent" v-if="isLeftShow">
        <div class="userinfo">
        <div class="avatar">
                  <van-image
        fit="cover"
  round
  width="4rem"
  height="4rem"
  @error="imgError"
  ref="img"
  :src="userInfo.image||'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2F871aa2b9b0a55be3f0738d76a15e23ebac5c586811e29-B6Aozr_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671244429&t=8a0754bb77ca0a793160357f3cc47265'"
/>
        </div>
        <div class="info">
        <span>用户名:{{userInfo.username}}</span>
        <p>邮箱：{{userInfo.email}}</p>
        </div>
        </div>
        <div class="item"><span>我的收藏</span><span class="arrow">></span></div>
        <div class="item"><span>我的喜欢</span><span class="arrow">></span></div>
        <div class="item"><span>我的足迹</span><span class="arrow">></span></div>
        <div class="item logout" @click="logOut"><span>退出登录</span><span class="arrow">></span></div>

      </div>
    </transition>
    <div class="main1" :class="{ isLeft: isLeftShow === false } "
      @click="isLeftShow = false">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="盛红房产" class="header-nav" right-text="返回"
  @click-right="$router.back()">
  <template #left>
    <van-icon name="wap-nav" size="18" @click.stop="isLeftShow = !isLeftShow" />
  </template>
</van-nav-bar>
    <!-- 顶部导航栏 -->
    <!-- 子路由占位符 -->
    <!-- <keep-alive> <router-view></router-view></keep-alive> -->
    <router-view></router-view>
    <!-- 子路由占位符 -->
            <!-- 底部标签栏 -->
    <van-tabbar placeholder  v-model="active" active-color="#87ceeb" inactive-color="#000" route>
  <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
  <van-tabbar-item icon="shop-collect-o" to="/houseAgentList">房产经纪</van-tabbar-item>
  <van-tabbar-item icon="coupon-o" to="/houseClassify">房产分类</van-tabbar-item>
  <van-tabbar-item icon="envelop-o" to="/about">关于我们</van-tabbar-item>
</van-tabbar>
<!-- 底部标签栏 -->

</div>
  </div>
</template>

<script>
import { userInfo } from '@/api/user'
import { Dialog } from 'vant'
export default {
  name: 'HouseIndex',

  data () {
    return {
      active: 0,
      isLeftShow: false,
      userInfo: {}
    }
  },
  created () {
    this.getUserinfo()
  },
  mounted () {
    // console.log(this.$route)
  },
  components: {
    [Dialog.Component.name]: Dialog.Component
  },
  methods: {
    async getUserinfo () {
      try {
        const res = await userInfo()
        console.log(res)
        this.userInfo = res
      } catch (error) {
        console.log(error)
      }
    },
    imgError () {
      console.log(61)
      this.$refs.img.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2F871aa2b9b0a55be3f0738d76a15e23ebac5c586811e29-B6Aozr_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671244429&t=8a0754bb77ca0a793160357f3cc47265'
    },
    logOut () {
      Dialog.confirm({
        title: '退出登录',
        message: '确定退出登录吗？'
      })
        .then(async () => {
          await this.$store.dispatch('user/userLogout')
          setTimeout(async () => {
            this.$toast.success('退出成功！')
          }, 500)
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .van-nav-bar.header-nav{
    background-color: skyblue;
   ::v-deep .van-nav-bar__title{
      color: blue !important;
    }
  }
    #container {
      height: 100vh;
  .v-enter,
  .v-leave-to {
    /* 在动画中加入位移 */
    transform: translateX(
      -70vw
    ); /* smyhvae提示：v-enter表示，一开始让DOM元素处于靠右80px的位置 */
  }

  /* v-enter-active 【入场动画的时间段】 */

  /* v-leave-active 【离场动画的时间段】 */

  .v-enter-active,
  .v-leave-active {
    transition: all 0.95s ease; /*期间，设置过渡的属性：all表示所有的属性、时间为1秒、过渡的状态*/
  }
  overflow: hidden;
  .leftCotent {
    position: absolute;
    left: 0;
    // background-color: aqua;
    width: 70vw;
    height: 100vh;
    border-right: 1px solid skyblue;
    .userinfo{
      display: flex;
      align-items: center;
      margin-top: 10px;
      p{
        margin: 0;
      }
      .info{
        padding: 10px;
      }
    }
                  .item{
          display: flex;
          justify-content: space-between;
                margin-top: 30px;
          .arrow{
            font-weight: 800;
            margin-right: 10px;
          }
        }
        .logout{
          color: red;
        }
  }
  .main1 {
    position: absolute;
    left: 70vw;
    width: 100vw;
    height: 100vh;
    // background-color: antiquewhite;
    transition: all 1s ease;
    .van-icon {
      font-size: 40px;
    }
  }
  .isLeft {
    left: 0vw;
  }
}
</style>
